<template>
    <div>
        <p>{{ typedText }}<span v-show="cursor">{{ '_' }}</span></p>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            typedText: '',
            index: 0,
            typingSpeed: 100, // 打字速度（毫秒）
            pauseSpeed: 1000, // 在每个单词之间暂停的毫秒数
            timer: null,
            cursor: false
        };
    },
    created() {
        this.typeText();
    },
    methods: {
        clear() {
            clearInterval(this.timer);
            this.cursor = false
        },
        typeText() {
            if (this.index < this.text.length) {
                this.timer = setTimeout(() => {
                    this.cursor = true
                    this.typedText = this.text.substring(0, this.index++);
                    this.typeText(); // 递归调用
                }, this.typingSpeed);
            }
            else {
                this.clear()
            }
        },
    },
    destroyed() {
        this.clear()
            ;
    }
};
</script>
<style lang="less" scoped>
.fousdis {
    display: none;
}
</style>